<template>
  <div style="padding:20px 250px">
    <div id="area"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    initChart() {
      const data = [
        { country: "申请单操作时长", year: "员工一", value: 502 },
        { country: "申请单操作时长", year: "员工二", value: 635 },
        { country: "申请单操作时长", year: "员工三", value: 809 },
        { country: "申请单操作时长", year: "员工四", value: 5268 },
        { country: "申请单操作时长", year: "员工五", value: 4400 },
        { country: "申请单操作时长", year: "员工六", value: 3634 },
        { country: "申请单操作时长", year: "员工七", value: 947 },
        { country: "订单操作时长", year: "员工一", value: 106 },
        { country: "订单操作时长", year: "员工二", value: 107 },
        { country: "订单操作时长", year: "员工三", value: 111 },
        { country: "订单操作时长", year: "员工四", value: 1766 },
        { country: "订单操作时长", year: "员工五", value: 221 },
        { country: "订单操作时长", year: "员工六", value: 767 },
        { country: "订单操作时长", year: "员工七", value: 133 },
        { country: "过程操作时长", year: "员工一", value: 163 },
        { country: "过程操作时长", year: "员工二", value: 203 },
        { country: "过程操作时长", year: "员工三", value: 276 },
        { country: "过程操作时长", year: "员工四", value: 628 },
        { country: "过程操作时长", year: "员工五", value: 547 },
        { country: "过程操作时长", year: "员工六", value: 729 },
        { country: "过程操作时长", year: "员工七", value: 408 },
        { country: "整体操作时长", year: "员工一", value: 200 },
        { country: "整体操作时长", year: "员工二", value: 200 },
        { country: "整体操作时长", year: "员工三", value: 200 },
        { country: "整体操作时长", year: "员工四", value: 460 },
        { country: "整体操作时长", year: "员工五", value: 230 },
        { country: "整体操作时长", year: "员工六", value: 300 },
        { country: "整体操作时长", year: "员工七", value: 300 },
      ];
      const chart = new Chart({
        container: "area",
        autoFit: true,
        height: 500,
      });

      chart.data(data);
      chart.scale("value", {
        nice: true,
      });
      
      chart.legend({
        position: 'top'
      })
      chart.tooltip({
        showCrosshairs: true,
        shared: true,
      });

      chart
        .area()
        .adjust("stack")
        .position("year*value")
        .color("country");
      chart
        .line()
        .adjust("stack")
        .position("year*value")
        .color("country");

      chart.interaction("element-highlight");

      chart.render();
    },
  },
  mounted() {
    this.initChart();
  },
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
